<template>
  <div class="mainBox">
    <div class="topBox">
      <span class="topTitle">签署中心</span>
      <div class="topContent" v-if="isaddmin || Number(role_id) === 3">
        <div class="topContentItem" @click="gotoDetail(item.name)" v-for="(item, index) in typeList" :key="item.id">
          <div><img :src="getImageUrl(index)" alt="" /></div>
          <div class="font16" style="margin-top: -2px">{{ item.name }}</div>
        </div>
        <!-- <div class="topContentItem" @click="gotoDetail('到期续签')">
          <div><img src="@/assets/image/cf/imgdq.png" alt="" /></div>
          <div class="font16" style="margin-top: -2px">到期续签</div>
        </div>
        <div class="topContentItem" @click="gotoDetail('离职签署')">
          <div><img src="@/assets/image/cf/imglz2.png" alt="" /></div>
          <div class="font16" style="margin-top: -2px">离职签署</div>
        </div>
        <div class="topContentItem" @click="gotoDetail('调岗签署')">
          <div><img src="@/assets/image/cf/imgtg.png" alt="" /></div>
          <div class="font16" style="margin-top: -2px">调岗签署</div>
        </div>
        <div class="topContentItem" @click="gotoDetail('规章制度签署')">
          <div><img src="@/assets/image/cf/imggzzd.png" alt="" /></div>
          <div class="font16" style="margin-top: -2px">规章制度签署</div>
        </div>
        <div class="topContentItem" @click="gotoDetail('自定义签署')">
          <div><img src="@/assets/image/cf/imgzdy.png" alt="" /></div>
          <div class="font16" style="margin-top: -2px">自定义签署</div>
        </div>  -->
      </div>
    </div>
    <div class="bottomBox">
      <div class="bottomListBox">
        <div class="flex box-row justify-content-center box-align-center">
          <div class="flex-1">
            <el-form ref="queryForm" :inline="true" class="mt10" :model="queryParams">
              <el-form-item label="合同类型">
                <el-select v-model="queryParams.type" placeholder="请选择合同类型" style="width: 200px; height: 36px">
                  <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
              <el-form-item label="参与人">
                <el-input v-model="queryParams.join_name" placeholder="请输入参与人" clearable style="width: 200px; height: 36px" />
              </el-form-item>
              <el-form-item label="合同信息">
                <el-input v-model="queryParams.keywords" placeholder="请输入合同信息" clearable style="width: 200px; height: 36px" />
              </el-form-item>
              <el-form-item label="发起时间">
                <el-date-picker
                  style="width: 200px; height: 36px"
                  v-model="dateTime"
                  type="daterange"
                  range-separator="-"
                  @change="timeChange"
                  format="YYYY/MM/DD"
                  value-format="YYYY-MM-DD"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button style="width: 72px; height: 36px; font-size: 16px" type="primary" size="mini" color="#01509f" @click="handleQuery">搜索</el-button>
                <el-button style="width: 72px; height: 36px; font-size: 16px" @click="reset">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div>
            <el-button style="height: 36px; font-size: 16px; margin-bottom: 10px" size="mini" @click="handleQuery" icon="folder-opened">导出</el-button>
          </div>
        </div>
        <div class="flex box-row mb20">
          <div :class="istaban === 1 ? 'table_anniu on' : 'table_anniu'" @click="checkList(1)">
            待我处理
            <span v-if="nmberinfo.first_count">({{ nmberinfo.first_count }})</span>
          </div>
          <div :class="istaban === 2 ? 'table_anniu on' : 'table_anniu'" @click="checkList(2)" v-if="isaddmin">
            我发起的
            <span v-if="nmberinfo.second_count">({{ nmberinfo.second_count }})</span>
          </div>
          <div :class="istaban === 3 ? 'table_anniu on' : 'table_anniu'" @click="checkList(3)">
            我收到的
            <span v-if="nmberinfo.third_count">({{ nmberinfo.third_count }})</span>
          </div>
          <div :class="istaban === 4 ? 'table_anniu on' : 'table_anniu'" @click="checkList(4)">
            未完成
            <span v-if="nmberinfo.fourth_count">({{ nmberinfo.fourth_count }})</span>
          </div>
          <div :class="istaban === 5 ? 'table_anniu on' : 'table_anniu'" @click="checkList(5)">
            已完成
            <span v-if="nmberinfo.fifth_count">({{ nmberinfo.fifth_count }})</span>
          </div>
          <div :class="istaban === 6 ? 'table_anniu on' : 'table_anniu'" @click="checkList(6)">
            已失效
            <span v-if="nmberinfo.sixth_count">({{ nmberinfo.sixth_count }})</span>
          </div>
          <div :class="istaban === 7 ? 'table_anniu on' : 'table_anniu'" @click="checkList(7)" v-if="isaddmin">
            解约中
            <span v-if="nmberinfo.seventh_count">({{ nmberinfo.seventh_count }})</span>
          </div>
          <div :class="istaban === 8 ? 'table_anniu on' : 'table_anniu'" @click="checkList(8)" v-if="isaddmin">
            已解约
            <span v-if="nmberinfo.eighth_count">({{ nmberinfo.eighth_count }})</span>
          </div>
          <div :class="istaban === 9 ? 'table_anniu on' : 'table_anniu'" @click="checkList(9)" v-if="isaddmin || Number(role_id) === 3">
            草稿
            <span v-if="nmberinfo.ninth_count">({{ nmberinfo.ninth_count }})</span>
          </div>
        </div>
        <el-table
          :data="datalist"
          border
          @selection-change="handleSelectionChange"
          v-loading="loading"
          element-loading-background="rgba(0, 0, 0, 0.5)"
          element-loading-text="加载中..."
          header-row-class-name="table-header"
        >
          <el-table-column label="任务主题" align="center" width="200">
            <template #default="scope">
              <div class="flex box-row-column" v-if="scope.row.isDrafts !== 1">
                <el-tooltip effect="light" v-if="scope.row.task_name && scope.row.task_name.length > 10" :content="scope.row.task_name" placement="top">
                  <span class="text-ellipsis paddingsx03" style="max-width: 180px; display: inline-block">
                    {{ scope.row.task_name }}
                  </span>
                </el-tooltip>
                <span v-if="scope.row.task_name && scope.row.task_name.length <= 10" class="text-ellipsis paddingsx03" style="max-width: 180px; display: inline-block">
                  {{ scope.row.task_name }}
                </span>
                <el-tooltip effect="light" v-if="scope.row.CreateUser && ('发起人:' + scope.row.CreateUser).length > 10" :content="'发起人:' + scope.row.CreateUser" placement="top">
                  <span class="text-ellipsis paddingsx03" style="max-width: 180px; display: inline-block">发起人:{{ scope.row.CreateUser }}</span>
                </el-tooltip>
                <span v-if="scope.row.CreateUser && ('发起人:' + scope.row.CreateUser).length <= 10" class="text-ellipsis paddingsx03" style="max-width: 180px; display: inline-block">
                  发起人:{{ scope.row.CreateUser }}
                </span>
              </div>
              <div class="flex box-row-column" v-if="scope.row.isDrafts === 1">
                <el-tooltip effect="light" v-if="scope.row.task.task_name && scope.row.task.task_name.length > 10" :content="scope.row.task.task_name" placement="top">
                  <span class="text-ellipsis paddingsx03" style="max-width: 180px; display: inline-block">
                    {{ scope.row.task.task_name }}
                  </span>
                </el-tooltip>
                <span v-if="scope.row.task.task_name && scope.row.task.task_name.length <= 10" class="text-ellipsis paddingsx03" style="max-width: 180px; display: inline-block">
                  {{ scope.row.task.task_name }}
                </span>
                <el-tooltip effect="light" v-if="scope.row.CreateUser && ('发起人:' + scope.row.CreateUser).length > 10" :content="'发起人:' + scope.row.CreateUser" placement="top">
                  <span class="text-ellipsis paddingsx03" style="max-width: 180px; display: inline-block">发起人:{{ scope.row.CreateUser }}</span>
                </el-tooltip>
                <span v-if="scope.row.CreateUser && ('发起人:' + scope.row.CreateUser).length <= 10" class="text-ellipsis paddingsx03" style="max-width: 180px; display: inline-block">
                  发起人:{{ scope.row.CreateUser }}
                </span>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="合同类型" align="center">
            <template #default="scope">
              <div v-if="scope.row.isDrafts !== 1">
                {{ gettype(scope.row.task.type) }}
              </div>
              <div v-else>
                {{ gettype(scope.row.type) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="时间" align="center" key="hired_time" prop="hired_time" width="300">
            <template #default="scope">
              <div class="flex box-row-column">
                <span v-if="scope.row.CreateTime" class="paddingsx03">开始时间:{{ scope.row.CreateTime }}</span>
                <span v-if="scope.row.create_time" class="paddingsx03">开始时间:{{ scope.row.create_time }}</span>

                <span v-if="scope.row.task.closing_date" class="paddingsx03">结束时间:{{ scope.row.task.closing_date }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="参与人" align="center" width="300" v-if="shouldShowAgeColumn()">
            <template #default="scope">
              <el-popover placement="bottom" width="400" trigger="hover">
                <!-- 自定义触发按钮 -->
                <template #reference>
                  <div class="flex box-row-column">
                    <div class="flex box-row-column" :style="{ 'max-height': isExpanded ? 'none' : '60px', overflow: 'hidden' }">
                      <div class="flex box-align-center paddingsx03" v-for="value in scope.row.join" :key="value">
                        <el-icon size="16" color="#01509f" v-if="!value.refusal_time && !value.sign_time" style="margin-top: 2px; margin-right: 2px">
                          <clock />
                        </el-icon>
                        <el-icon size="16" color="#ff4345" v-if="value.refusal_time" style="margin-top: 2px; margin-right: 2px">
                          <circle-close />
                        </el-icon>
                        <el-icon size="16" color="#2ca761" v-if="value.sign_time" style="margin-top: 1px; margin-right: 2px">
                          <circle-check />
                        </el-icon>
                        {{ value.join_name }}
                      </div>
                    </div>
                  </div>
                </template>

                <!-- 自定义 Popover 内容 -->
                <div class="flex box-row-column popover-content">
                  <div class="company-name flex box-row-column" v-for="value1 in scope.row.join" :key="value">
                    <div class="flex box-align-center">
                      <el-icon size="16" color="#01509f" v-if="!value1.refusal_time && !value1.sign_time" style="margin-top: 1px; margin-right: 2px">
                        <clock />
                      </el-icon>
                      <el-icon size="16" color="#ff4345" v-if="value1.refusal_time" style="margin-top: 1px; margin-right: 2px">
                        <circle-close />
                      </el-icon>
                      <el-icon size="16" color="#2ca761" v-if="value1.sign_time" style="margin-top: 1px; margin-right: 2px">
                        <circle-check />
                      </el-icon>
                      <div class="flex-1">{{ value1.join_name }}</div>

                      <div style="color: #01509f" class="cursor" @click="gotocopy(value1)" v-if="value1.main_name == '个人'">签署链接</div>
                    </div>

                    <div class="mt06">
                      {{ value1.join_phone }}
                    </div>

                    <img src="@/assets/enterprise/yirenzheng.png" style="width: 48px; height: 16px" class="mt06" />
                    <!-- <img src="../assets/enterprise/weirenzheng.png" v-else> -->
                  </div>
                </div>
              </el-popover>

              <div class="flex box-align-center paddingsx03 cursor" v-if="scope.row.join.length > 2" @click="isExpanded = !isExpanded">
                <el-icon size="16" color="#01509f" style="margin-top: 2px; margin-right: 2px">
                  <arrow-down v-if="!isExpanded" />
                  <arrow-up v-else />
                </el-icon>
                <span style="font-size: 14px">{{ isExpanded ? "收起" : "展开" }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="证书" align="center" key="job_status" prop="job_status" v-if="shouldShowAgeColumn()" width="150">
            <template #default="scope">
              <div class="flex box-align-center" v-if="!scope.row.reportUrl || scope.row.quKuaiUrl">
                <img src="@/assets/image/cf/shu-1.png" style="width: 15px; height: 18px; margin-right: 5px" />
                暂无证书
              </div>
              <div class="flex box-row-column box-align-start" v-else>
                <div class="flex justify-content-center box-align-center cursor" @click="gotoUrl1(scope.row.reportUrl)" v-if="scope.row.reportUrl">
                  <img src="@/assets/image/cf/shu-2.png" style="width: 15x; height: 18px; margin-right: 5px" />
                  电子证书
                </div>

                <div class="flex justify-content-center box-align-center cursor" style="margin-top: 5px" @click="gotoUrl1(scope.row.quKuaiUrl)" v-if="scope.row.quKuaiUrl">
                  <img src="@/assets/image/cf/qiyezhengshu.png" style="width: 15px; height: 18px; margin-right: 5px" />
                  区块链证书
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="状态" align="center" v-if="shouldShowAgeColumn()">
            <template #default="scope">
              {{ getstatus(scope.row.task.status) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" fixed="right" width="380">
            <template #default="scope">
              <el-button style="font-size: 16px; color: #3376f2" text icon="EditPen" @click="gotoEdit(scope.row)" v-if="Number(istaban) === 8 || Number(istaban) === 9">编辑</el-button>
              <el-button style="font-size: 16px; color: #3376f2" text icon="EditPen" @click="gotoQianShu(scope.row, 2)" v-if="Number(scope.row.is_affix) === 1">
                {{ Number(scope.row.join_type) === 1 ? "签署" : "企业签署" }}
              </el-button>

              <el-button v-if="!scope.row.isDrafts && Number(scope.row.task.status) !== 2" style="font-size: 16px; color: #666666" text icon="View" @click="gotoQianShu(scope.row, 3)">查看</el-button>
              <el-button style="font-size: 16px; color: #ff4345" text icon="Delete" @click="gotoDE(scope.row)" v-if="showDeleteButton(scope.row)">删除</el-button>
              <el-button style="font-size: 16px; color: #ff4345" text icon="circle-close" @click="gotoJuqian(scope.row)" v-if="scope.row.is_noSign === 1">拒签</el-button>
              <el-button style="font-size: 16px; color: #ff4345" text icon="circle-close" @click="gotojieyue(scope.row)" v-if="scope.row.is_break === 1">解约</el-button>
              <el-button style="font-size: 16px; color: #f37327" text icon="Refresh" @click="gotoEdit(scope.row)" v-if="Number(scope.row.task.status) === 4">重新发起</el-button>
              <el-button v-if="scope.row.is_revoke === 1" style="font-size: 16px; color: #e8993d" text icon="refresh-left" @click="gotRevoke(scope.row)">撤销</el-button>
              <el-button v-if="Number(scope.row.task.status) === 3" style="font-size: 16px; color: #3376f2" text icon="Collection" @click="gotzhengshu(scope.row)">证书管理</el-button>
            </template>
          </el-table-column>
        </el-table>

        <Pagination :total="total" :current-page="pageInfo.page" :page-size="pageInfo.limit" @pagination-change="handlePaginationChange" />
      </div>
    </div>

    <!-- {{ info }} -->

    <el-dialog v-model="open" title="登记" width="538" :before-close="handleClose">
      <el-form ref="ruleFormRef" label-position="right" label-width="130px" :model="form" class="form-inline">
        <el-form-item class="" label="员工：">
          <span v-if="!is_batch">{{ form.name }}</span>
          <span v-if="is_batch">已选择{{ checklist.length }}人</span>
        </el-form-item>
        <el-form-item class="" label="登记类型：">
          <el-radio-group v-model="form.insured_status">
            <el-radio :value="0">未参保</el-radio>
            <el-radio :value="1">正常参保</el-radio>
            <el-radio :value="2">已停保</el-radio>
            <el-radio :value="3">异常参保</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item class="" label="参保时间：" v-if="form.insured_status == 1">
          <el-date-picker v-model="form.insured_time" type="date" format="YYYY/MM/DD" value-format="YYYY-MM-DD" placeholder="请选择参保时间"></el-date-picker>
        </el-form-item>
        <el-form-item class="" label="停保时间：" v-if="form.insured_status == 2">
          <el-date-picker v-model="form.insured_stop_time" type="date" format="YYYY/MM/DD" value-format="YYYY-MM-DD" placeholder="请选择停保时间"></el-date-picker>
        </el-form-item>
        <el-form-item class="" label="备注：">
          <el-input v-model="form.insured_desc" style="width: 309px; height: 51px" :rows="2" type="textarea" placeholder="备注" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button size="small" @click="cancel">取消</el-button>
          <el-button type="primary" color="#01509f" size="small" @click="changeInfo">确认</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog v-model="dialogVisible" width="500" :before-close="handleClosets">
      <template #header>
        <div class="custom-header">
          <div class="flex box-align-center">
            <el-icon style="color: #01509f; font-size: 20px"><Warning /></el-icon>
            <div class="fonttrz">签名证书真实未确认提示</div>
          </div>
        </div>
      </template>
      <div>
        尊敬的客户:
        <br />
        根据《电子认证服务管理办法》最新规定，您的数字证书尚未完成真实性核验。为确保签署的法律效力，请您点击下方补充核验按钮进行真实性核验。
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="goHeyan">补充核验</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog v-model="qsmmVisible" width="500" :before-close="handleCloseqsmm" title="签署密码">
      <el-form ref="ruleFormRefqqmm" :rules="rules" label-position="right" :model="formqsmm" class="form-inline">
        <el-form-item class="" prop="password" label="">
          <el-input v-model="formqsmm.password" type="password" placeholder="请输放六位数字签署密码" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="goHeyanqsmm">验证</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog v-model="zsVisible" width="30%" :before-close="handleClosezs" title="证书管理">
      <div class="flex flex-v mt20">
        <div class="flex justify-content-center box-align-center mb-6 cursor" @click="checkzstab(1)">
          <div :class="zscheck === 1 ? 'flex box-align-center checkbj on1' : 'flex box-align-center checkbj'">
            <div class="flex box-align-center px-4">
              <img src="@/assets/image/cf/shu-2.png" style="width: 20px; height: 20px; margin-right: 5px" />
              <div class="dianzi_img">电子证书</div>
            </div>
            <div class="syzi">剩余次数：无限次</div>
            <img src="@/assets/image/cf/yuanjiao2.png" alt="" class="jiaobiao" v-if="zscheck === 1" />
          </div>
          <div class="zi2 ml20 cursor" v-if="reportUrl" @click="gotoUrl(1)">查看证书</div>
        </div>
        <div class="flex justify-content-center box-align-center mb-6 cursor" @click="checkzstab(2)">
          <div :class="zscheck === 2 ? 'flex box-align-center checkbj on1' : 'flex box-align-center checkbj'">
            <div class="flex box-align-center px-4">
              <img src="@/assets/image/cf/qiyezhengshu.png" style="width: 20px; height: 20px; margin-right: 5px" />
              <div class="dianzi_img">区块链证书</div>
            </div>
            <div class="syzi">剩余次数：无限次</div>
            <img src="@/assets/image/cf/yuanjiao2.png" alt="" class="jiaobiao" v-if="zscheck === 2" />
          </div>
          <div class="zi2 ml20 cursor" v-if="quKuaiUrl" @click="gotoUrl(2)">查看证书</div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" class="w-52" @click="goHeyanzs">确认申请</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
  import { ref, onMounted, onBeforeUnmount, computed, reactive, nextTick } from "@/TUIKit/adapter-vue";
  import Pagination from "@/components/Pagination.vue";
  import type { ElMessage, ElMessageBox, UploadProps } from "element-plus";
  import { UserBaseInfo } from "@/api/user";
  import { user_list, contractType, manpowerlist, index_count, rejectApi, delete_contractApi, check_passwordApi, revokeApi, downloadChainReportApi, deleteDraftApi } from "@/api/cf";
  // import { insured_handle, insuredExport, insuredTotal } from "@/api/xl";
  import { exportFile } from "@/utils/format";
  import * as echarts from "echarts";
  import { useRouter } from "vue-router";
  import { useUserStore } from "@/store/user";
  const router = useRouter();
  const chartRef = ref(null);
  const uploadRef = ref(null);
  const queryParams = ref({ keywords: "", operation: "", join_name: "", init_end: "", init_start: "", type: "" });
  const pageInfo = ref({ page: 1, limit: 10 });
  const loading = ref(false);
  const userStore = useUserStore();
  const datalist = ref([]);
  const token = localStorage.getItem("token");
  const ishave = ref([]);
  const typeList = ref([]);
  const dateTime = ref([]);
  const dialogVisible = ref(false);
  const qsmmVisible = ref(false);
  const zsVisible = ref(false);
  const ruleFormRefqqmm = ref(null);
  const zscheck = ref(0);
  const reportUrl = ref("");
  const quKuaiUrl = ref("");

  const isExpanded = ref(false);
  const formqsmm = reactive({
    password: "",
  });
  const info = ref({
    info: {
      id: 0,
      mobile: "",
      name: "",
      legal_person: "",
      legal_person_id: "",
      social_credit_code: "",
    },
    role: {
      role_id: 0,
      role_name: "",
    },
    userinfo: {
      username: "",
      auth_type: 1,
      auth_name: "",
      create_time: "",
      id_card: "",
      mobile: "",
      legal_person: "",
      establish_time: "",
      legal_person_id: "",
      social_credit_code: "",
      id: 0,
      uid: 0,
      info_id: 0,
      sign_password: "",
    },
  });
  const rules = reactive({
    password: [{ required: true, message: "请输入签署密码", trigger: "blur" }],
  });
  const isnew = ref(false);
  const qsname = ref("");
  const gotoDetail = a => {
    qsname.value = a;
    //dialogVisible.value = true;

    if (!iszhuce.value) {
      dialogVisible.value = true;
    } else {
      isnew.value = true;
      router.push({ name: "qianshu", params: { task_id: "", name: a, status: "", userid: userid.value, usertype: usertype.value } });
    }
  };
  const zsid = ref(0);
  const gotzhengshu = a => {
    zsVisible.value = true;
    zsid.value = a.Id;
    reportUrl.value = a.report_url;
    quKuaiUrl.value = a.qukuai_url;
  };
  const handleClosezs = () => {
    zsVisible.value = false;
  };

  const checkzstab = a => {
    zscheck.value = a;
  };

  const gotocopy = a => {
    const url = "https://demo-api.niuyuwang.com/sign";
    const input = document.createElement("input");
    input.value = url + "?tid=" + a.task_id + "&uid=" + a.userId;
    document.body.appendChild(input);
    input.select();
    document.execCommand("Copy");
    document.body.removeChild(input);
    ElMessage.success("复制成功");
  };

  const gotoUrl = a => {
    if (a === 1) {
      window.open(reportUrl.value, "_blank");
    } else {
      window.open(quKuaiUrl.value, "_blank");
    }
  };

  const gotoUrl1 = a => {
    window.open(a, "_blank");
  };
  const goHeyanzs = () => {
    downloadChainReportApi(zsid.value, zscheck.value).then(res => {
      ElMessage.success("提交成功");
      zsVisible.value = false;
      handleQuery();
    });
  };
  const gotojieyue = a => {
    ElMessageBox.confirm("是否确认发起解约流程?", "提示", {
      confirmButtonText: "去解约",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      qsname.value = a;
      router.push({ name: "jieyue", params: { task_id: a.task_id, userid: a.userId, usertype: a.join_type } });
    });
    //dialogVisible.value = true;
  };
  const findNameById = (arr, targetId) => {
    const item = arr.find(item => item.id === targetId);
    return item ? item.name : undefined;
  };
  const gotoEdit = a => {
    let name = null;
    let isDrafts = null;
    let id = null;
    let userid = null;
    if (a.isDrafts) {
      isDrafts = a.isDrafts;
      id = a.id;
      name = findNameById(typeList.value, a.type);
      userid = a.user_id;
    } else {
      id = a.task_id;
      isDrafts = 0;
      name = findNameById(typeList.value, a.task.type);
      userid = a.userId;
    }
    nextTick(() => {
      router.push({ name: "qianshu", params: { task_id: id, name: name, status: "", userid: userid, usertype: a.join_type ? a.join_type : "", isDraft: isDrafts } });
    });
  };
  const nmberinfo = ref({
    eighth_count: 0,
    fifth_count: 0,
    first_count: 0,
    fourth_count: 0,
    ninth_count: 0,
    second_count: 0,
    seventh_count: 0,
    sixth_count: 0,
    third_count: 0,
  });
  const handleClosets = () => {
    dialogVisible.value = false;
  };

  const shouldShowAgeColumn = () => {
    // 检查表格数据中是否有 showAge 为 true 的项
    return datalist.value.some(item => item.isDrafts !== 1);
  };

  // const q  = row => {
  //   if (row.isDrafts === 1) return false;

  //   if (Number(scope.row.task[0].status)===3) return true

  // }
  const showDeleteButton = row => {
    if (row.isDrafts === 1) return true; // 草稿不显示

    if (!isaddmin.value) return false; // 非管理员不显示

    const task = row.task;
    if (!task) return false; // task 不存在

    // 处理 task 为对象或数组
    const status = Array.isArray(task) ? task?.status : task?.status;
    return [4, 5, 6].includes(status);
  };
  const showRejectButton = row => {
    if (row.isDrafts === 1) return false; // 草稿不显示

    const task = row.task;
    if (!task) return false; // task 不存在

    // 处理 task 为对象或数组
    const status = Array.isArray(task) ? task?.status : task?.status;
    return status === 1;
  };

  const qstype = ref(0);
  const qsid = ref(0);
  const qsuserid = ref(0);

  const gotoQianShu = (row, type) => {
    usertype.value = row.join_type;
    qstype.value = type;
    qsid.value = row.task_id;
    qsuserid.value = row.userId;

    if (!iszhuce.value) {
      dialogVisible.value = true;
    } else {
      if (type === 2) {
        if (!info.value.userinfo.sign_password) {
          ElMessageBox.confirm("签署密码还未设置，是否现在设置?", "提示", {
            confirmButtonText: "去设置",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            router.push({
              path: "/user",
            });
          });
        } else {
          isnew.value = false;
          qsmmVisible.value = true;
        }
      } else if (type === 3) {
        router.push({ name: "SigningCenterDetail", params: { id: row.task_id, type: type, userId: row.userId, usertype: row.join_type } });
      }
    }
    //router.push({ name: "SigningCenterDetail", params: { id: row.Id, type: type, userId: userid.value } });
  };

  const goHeyanqsmm = () => {
    ruleFormRefqqmm.value.validate((valid: boolean) => {
      if (valid) {
        check_passwordApi({
          password: formqsmm.password,
        }).then(res => {
          // ElMessage.success("签署密码验证成功");
          ruleFormRefqqmm.value?.resetFields();
          qsmmVisible.value = false;
          if (isjuqian.value) {
            rejectApi({ task_id: isjuqianid.value, user_id: isjuqianuserid.value }).then(res => {
              ElMessage.success("拒签成功");
              handleQuery();
            });
          } else {
            setTimeout(() => {
              router.push({ name: "SigningCenterDetail", params: { id: qsid.value, type: qstype.value, userId: qsuserid.value, usertype: usertype.value } });
            }, 400);
          }
          // setTimeout(() => {
          //   if (isnew.value) {
          //     router.push({ name: "qianshu", params: { task_id: "", name: qsname.value, status: "", userid: userid.value, usertype: usertype.value, isDraft: 0 } });
          //   } else {
          //     router.push({ name: "SigningCenterDetail", params: { id: qsid.value, type: qstype.value, userId: qsuserid.value, usertype: usertype.value } });
          //   }
          // }, 500);
        });
      }
    });
  };
  const aaclick = () => {
    router.push({ name: "certifyThree" });
  };
  const goHeyan = () => {
    dialogVisible.value = false;
    if (Number(role_id.value) > 1) {
      //个人
      router.push({ name: "perCertifyThree" });
    } else {
      //企业
      router.push({ name: "certifyThree" });
    }
    //   router.push({ path: '/myEnterprise/certify', params: { istree: 1 }  })
  };

  const gettype = (row: any) => {
    switch (row) {
      case 1:
        return "入职合同";
      case 2:
        return "续签 ";
      case 3:
        return "规章制度";
      case 4:
        return "调岗";
      case 5:
        return "离职";
      case 6:
        return "自定义";
      case 8:
        return "解约";
    }
  };

  const getstatus = (row: any) => {
    switch (row) {
      case 1:
        return "待签署";
      case 2:
        return "签署中 ";
      case 3:
        return "已完成";
      case 4:
        return "已过期";
      case 5:
        return "已撤销";
      case 6:
        return "已拒签";
      case 7:
        return "解约中";
      case 8:
        return "已解约";
    }
  };

  const gotRevoke = row => {
    ElMessageBox.confirm("确定撤销该合同?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      revokeApi({ task_id: row.task_id }).then(res => {
        ElMessage.success("撤销成功");
        handleQuery();
      });
    });
  };
  const gotoDE = row => {
    ElMessageBox.confirm("是否确定删除?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      // console.log(row,'row');
      if (row.isDrafts === 1) {
        deleteDraftApi(row.id).then(res => {
          ElMessage.success("删除成功");
          handleQuery();
        });
      } else {
        delete_contractApi(row.task_id).then(res => {
          ElMessage.success("删除成功");
          handleQuery();
        });
      }
    });
  };

  const timeChange = val => {
    if (val) {
      queryParams.value.init_start = val[0];
      queryParams.value.init_end = val[1];
    } else {
      queryParams.value.init_start = "";
      queryParams.value.init_end = "";
      dateTime.value = [];
    }
  };

  const auth_type = ref(0);
  onMounted(() => {
    contractType().then(res => {
      typeList.value = res.data;
    });

    getInfo();
    index_count().then(res => {
      nmberinfo.value = res.data;
      //  auth_type.value = res.data.auth_type;
    });

    nextTick(() => {
      getList();
    });
  });

  const iszhuce = ref(false);
  const role_id = ref(0);
  const userid = ref(0);
  const isaddmin = ref(false);
  const usertype = ref(0);

  const getInfo = async () => {
    await UserBaseInfo({}).then(res => {
      info.value = res.data;
      role_id.value = res.data.role.role_id;
      // 企业
      if (Number(res.data.role.role_id) === 1) {
        isaddmin.value = true;
        usertype.value = 2;
        userid.value = res.data.info.id;
        if (res.data.info && res.data.info?.account) {
          //认证过
          iszhuce.value = true;
        } else {
          iszhuce.value = false;
        }
      }
      // 个人
      else if (Number(res.data.role.role_id) > 1) {
        userid.value = res.data.userinfo.info_id;
        isaddmin.value = false;
        usertype.value = 1;
        if (res.data.userinfo && res.data.userinfo?.account) {
          //认证过
          iszhuce.value = true;
        } else {
          iszhuce.value = false;
        }
      }
    });
  };
  onBeforeUnmount(() => {});
  const istaban = ref(0);
  const checkList = val => {
    istaban.value = val;
    queryParams.value.operation = val;
    pageInfo.value.page = 1;
    datalist.value = [];
    getList();
  };
  const handleQuery = () => {
    pageInfo.value.page = 1;
    datalist.value = [];
    getList();
  };
  const reset = () => {
    queryParams.value = { keywords: "", operation: "", join_name: "", init_end: "", init_start: "", type: "" };
    pageInfo.value.page = 1;
    dateTime.value = [];
    datalist.value = [];
    getList();
  };
  const total = ref(0);
  const getList = () => {
    loading.value = true;
    manpowerlist({ page: pageInfo.value.page, limit: pageInfo.value.limit, ...queryParams.value }).then(res => {
      loading.value = false;
      datalist.value = res.data;
      reportUrl.value = res.data.report_url;
      quKuaiUrl.value = res.data.quKuaiUrl;
      total.value = res.count;
    });
  };
  const handlePaginationChange = ({ page, size }: { page: number; size: number }) => {
    pageInfo.value.page = page;
    pageInfo.value.limit = size;
    datalist.value = [];
    getList();
  };

  const isjuqian = ref(false);
  const isjuqianid = ref(0);
  const isjuqianuserid = ref(0);
  /// 拒签 需要验证密码
  const gotoJuqian = row => {
    isjuqian.value = true;
    ElMessageBox.confirm("是否确定拒签？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      qsmmVisible.value = true;

      isjuqianid.value = row.task_id;
      isjuqianuserid.value = row.userId;

      console.log(isjuqianid.value, "sgsggg2");
      // rejectApi({ id: row.Id }).then(res => {
      //   ElMessage.success("拒签成功");
      //   handleQuery();
      // });
    });
  };
  const getImageUrl = index => {
    return new URL(`/src/assets/image/cf/imgrz${index + 1}.png`, import.meta.url).href;
  };
</script>

<style lang="scss" scoped>
.zi2 {
  font-size: 15px;
  color: #01509f;
  // font-family: 黑体;
}

.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
}

.company-name {
  padding: 10px 0;
  border-bottom: 1px solid #eaeaea;
}

.mb-6 {
  margin-bottom: 1.5rem !important;
}

.px-4 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.checkbj {
  border: solid 1px #eaeaea;
  background-color: #f5f5f5;
  width: 26.25rem !important;
  height: 2.625rem !important;
  position: relative;
  border-radius: 6px;
  font-size: 16px;
  justify-content: space-between;
}

.on1 {
  border-color: #01509f !important;
  background-color: #eaf5ff !important;
  color: #01509f !important;
}

.jiaobiao {
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  right: 0px;
  top: 0px;
  z-index: 1;
}

.popover-content {
  max-height: 20rem !important;
  overflow-y: scroll;

  &::-webkit-scrollbar {
    display: none;
  }
}

.syzi {
  font-size: 13px;
  margin-right: 10px;
  color: #999;
}

.dianzi_img {}

.cell .el-button {
  margin-left: 0px !important;
  padding: 8px 10px !important;
}

.fonttrz {
  font-size: 16px;
  color: #333;
  font-weight: bold;
  margin-left: 5px;
}

.el-table {
  font-size: 16px;
  /* 默认大小 */
}

/* 设置表头文字 */
.el-table th {
  font-size: 18px;
}

/* 设置表格内容文字 */
.el-table td {
  font-size: 16px;
}

.table_anniu {
  height: 30px;
  border: solid 1px #eaeaea;
  border-radius: 6px;
  color: #666666;
  font-size: 15px;
  line-height: 30px;
  text-align: center;
  padding: 0 12px;
  cursor: pointer;
  margin: 0 10px;
}

.table_anniu:hover {
  border-color: rgb(198, 226, 255);
  background-color: rgb(236, 245, 255);
  color: #409eff;
}

.table_anniu.on {
  border-color: #01509f;
  background-color: #01509f;
  color: #fff;
}

.mainBox {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  // padding: 22px;
  // box-sizing: border-box;

  .topBox {
    background-color: #fff;
    border-radius: 12px;
    padding: 17px;
    box-sizing: border-box;

    .topTitle {
      font-size: 20px;
      font-weight: bolder;
      color: #333;
    }

    .topContent {
      display: flex;
      flex-direction: row;
      margin-top: 20px;
      gap: 30px;
      width: 100%;
      // padding: 17px 41px 0 41px;
      box-sizing: border-box;

      .topContentItem {
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: center;
        border: solid 1px #e5e5e5;
        padding: 14px 10px;
        border-radius: 10px;
        box-sizing: border-box;
        flex-grow: 1;
        cursor: pointer;
        font-size: 15px;
      }

      .topContentItem:hover {
        background-color: #f7faff;
        border-color: #78aaff;
      }

      .zi3 {
        font-size: 16px;
      }

      .num_kuai {
        // width: 30%;
        margin-top: 10px;
        margin-right: 98px;
        text-align: center;
        cursor: pointer;
        transition: background-color 0.8s ease, transform 0.8s ease;
        will-change: background-color;
      }

      .checked {
        color: #fff;
        border-radius: 6px;
        padding: 6px 10px;
        width: 92px;
        height: 64px;
        box-sizing: border-box;

        .y1::before {
          display: none;
        }

        .y2::before {
          display: none;
        }

        .y3::before {
          display: none;
        }

        .y4::before {
          display: none;
        }

        .y5::before {
          display: none;
        }

        .y6::before {
          display: none;
        }
      }

      .zi_num {
        font-size: 24px;
        font-weight: bold;
      }

      .y1::before {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #1864f2;
        margin-right: 5px;
      }

      .y2::before {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #fe5c55;
        margin-right: 5px;
      }

      .y3::before {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #2ad4ae;
        margin-right: 5px;
      }

      .y4::before {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #ff7b43;
        margin-right: 5px;
      }

      .y5::before {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #9188e5;
        margin-right: 5px;
      }

      .y6::before {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #e5c388;
        margin-right: 5px;
      }
    }
  }

  .bottomBox {
    background-color: #fff;
    border-radius: 12px;
    padding: 17px;
    box-sizing: border-box;
    margin-top: 22px;

    .bottomTopBox {
      padding-bottom: 18px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #eaeaea;

      .bottomTitle {
        font-size: 20px;
        color: #333;
        font-weight: bolder;
        flex: 1;
      }

      .bottomRightBox {
        display: flex;
        align-items: center;

        .btnItem1 {
          border-radius: 6px;
          width: 108px;
          height: 36px;
          text-align: center;
          line-height: 30px;
          box-sizing: border-box;
          font-size: 16px;
          // color: #333;
        }

        .btnItem2 {
          border: none;
          border-radius: 6px;
          width: 72px;
          height: 36px;
          text-align: center;
          line-height: 30px;
          box-sizing: border-box;
          font-size: 16px;
        }
      }
    }
  }
}

.dialog-footer {
  display: flex;
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中（可选） */
}

.w-52 {
  width: 13rem !important;
}

:deep(.el-table__header) {
  .table-header {
    th {
      font-size: 16px;
      background: #f3f8fb;
      height: 53px;
      color: #6f7070;
      font-weight: normal;
    }
  }
}
</style>
